# body标签默认有外边距，造成页面四边都有白色间隙，如何去除？
#   body{
#   margin: 0;
#   }
# 内容居中：
# 文本居中 text-align:center;/*文字对齐方式(居中)，text-align主要针对的是块级或行内块元素内行内内容（如文本、图片、行内块元素）的水平对齐方式*/
# 区域居中 通过将元素的 margin-left 和 margin-right 属性设置为 auto，并且确保需要居中的块级元素和父元素有一个明确的宽度，可以实现元素在其父容器中的水平居中。
#   .container{
#   width: 980px;
#   margin: 0 auto;
#   }
# display指定 HTML 元素盒子类型。
# 父亲没有高度或宽度会被孩子支撑起来
# 如果存在浮动，一定记得在最后加<div style="clear:both"></div>
# 如果想要用别人的样式，浏览器选中区域查看样式
# 布局的划分很重要：先整体再局部，从外到内，从上到下，从左到右(如通栏->版心->内容)
# a标签是行内标签，行内标签的宽高、垂直方向上的内外边距默认无效。
# 文本可以通过行高解决居中问题，图片可以通过边距解决居中问题
# vertical-align是可以用于控制行内及行内块元素垂直对齐方式的属性，当多个内联元素（如 inline, inline-block, 文本等）位于同一行时，它们共同组成一个行框（Line Box），这个行框的高度由内部最高的元素决定。属性值：baseline基线对齐(默认)，top顶部对齐，middle垂直居中对齐，bottom底部对齐
# 兄弟元素之间的空隙通常是由于HTML中的空格或换行符被浏览器解析为文本节点导致的，以下有几种解决方案：
# 方案1：将元素写在同一行，通过删除元素间的空格/换行，直接消除文本节点
# 方案2：通过字体大小归零，使文本节点宽度为0
# 方案3：Flex布局天然忽略文本节点间隙
# 方案4：用外边距负值抵消默认间隙（4px是常见值，但可能因字体变化）
# a标签默认有下划线，text-decoration:none;来去除
# :hover伪类选择器用于鼠标悬停在指定的元素时，为指定的元素应用样式，还可以在悬停在某个元素上时，改变其他子元素的样式(如.app:hover .download{})
# ::after伪元素选择器，用于在被选元素的内容最后面插入内容，通常配合content属性来指定要插入的内容，如.clear::after{content:"";display:block;clear:both}
# transition过渡属性(复合属性)：可以为一个元素在不同样式之间切换的时候添加过渡效果，transition-property需要过渡的属性(all表示所有可过渡的属性)，transition-duration过渡效果的持续时间等。
# opacity属性用于设置整个元素的不透明度(可被继承)，值是0到1之间的数字，0表示完全透明(元素不可见)，1表示不透明，0到1之间的小数表示半透明
# cursor属性用于设置鼠标悬停在元素上时指针显示样式，auto默认值，由浏览器自动决定光标样式，default箭头光标，pointer手型光标，表示可点击如链接，text工字型光标，表示可选中文本，move十字光标，表示可拖拽移动

# 边框属性border主要包括边框宽度、边框样式(solid: 定义实线边框，dashed: 定义一个虚线边框，dotted: 定义一个点线边框。可以设置单方向边框线，border-方位名词)、边框颜色以及简写属性，还可以设置边框的颜色为"transparent"透明的，详见https://www.runoob.com/css/css-border.html
# 圆角border-radius（属性值数字+px/百分比，表示圆角半径，若半径超过元素宽或高的 50%，实际效果与 50% 相同，取宽或高两者中较小的值作为基准）每个半径的四个值的顺序是：按照顺时针方向，左上角，右上角，右下角，左下角，没有取值的角与对角取值相同，只有一个值则四个角都会设置，类似内外边距的属性值写法。常见应用：正圆形状-给正方形盒子设置圆角属性值为自身宽高的一半/50%。胶囊形状-给长方形盒子设置圆角属性值为自身高度的一半。
# 阴影box-shadow（属性值h-shadow，必需属性，水平偏移量，正值向右，负值向左。v-shadow，必需属性，垂直偏移量，正值向下，负值向上。blur模糊半径，阴影的模糊程度，值越大越模糊。spread扩散半径，阴影的大小，正值扩大阴影，负值缩小阴影。color阴影的颜色，如rgba(0,0,0,0.5)。inset内部阴影）
# 背景色background-color
# 背景图片background-image（属性值url("背景图url")，背景图默认重复平铺）
# 背景图像在元素内的重复方式background-repeat（repeat默认值，背景图像在水平和垂直方向都重复，铺满整个元素背景，no-repeat不重复，repeat-x背景图像仅在水平方向重复，垂直方向不重复，repeat-y背景图像仅在垂直方向重复，水平方向不重复。）
# 背景图位置background-position（属性值为水平方向位置，垂直方向位置。可以是关键字，关键字取值写法可以颠倒顺序，且如果只写一个关键字，另一个方向默认为居中，也可以是坐标(数字+px，正负都可以)，数字只写一个值只表示水平方向，垂直方向为居中，关键字和坐标可以混用，比如right bottom 表示背景图像位于元素的右下角，center 表示水平和垂直方向都居中也可以单独表示。定位点是背景图像的左上角，10px 20px 表示背景图像距离元素左侧 10 像素，距离元素顶部 20 像素。）
# 背景图大小background-size（属性值宽度，高度。可以是关键字，百分比，数字+单位，只有一个值则表示宽度，其高度自动按比例缩放即auto。cover：等比例缩放背景图像完全覆盖元素，可能会裁剪图像的部分内容，以确保元素被完全填充。contain：等比例缩放背景图像完整包含在元素内，可能会在元素内留下空白区域，以确保图像的完整显示。300px 200px 表示背景图像的宽度为 300 像素，高度为 200 像素。）
# 背景图像是否固定或者随着页面的其余部分滚动background-attachment（属性值scroll背景图片随着页面的滚动而滚动，这是默认的。fixed背景图片不会随着页面的滚动而滚动。）
# background简写属性，作用是将背景属性设置在一个声明中。（属性值：背景色，背景图，背景图重复方式，背景图位置/背景图大小，背景图固定）各值之间用空格分隔，不分先后顺序，可以只有其中的某些值。
# overflow属性用于控制内容溢出元素框时显示的方式。（属性值visible溢出的部分不会隐藏，会呈现在元素框之外。hidden，溢出隐藏。scroll，溢出滚动(无论是否溢出，都显示滚动条位置)。auto，溢出滚动(溢出才显示滚动条位置)）
# CSS精灵：将多个小图标或图像合并到一张大图中，通过 CSS 的background-position属性精准定位显示所需部分，从而减少 HTTP 请求次数，提升页面加载速度。
#       1.创建盒子，盒子尺寸与小图尺寸相同。
        # 2.设置盒子背景图为精灵大图。
        # 3.添加background-position属性，改变背景图位置，可以测量小图左上角坐标，取负值坐标为background-position属性值(向左上运动图片位置)
# 字体图标：展示的是图标，本质是字体。
# 作用：在网页中添加简单的、颜色单一的小图标。
# iconfont图标库：https://www.iconfont.cn/
# SEO：搜索引擎优化，提升网站搜索排名
# SEO三大标签：title网页标题标签，description网页描述，keywords网页关键词
# Favicon图标：网站图标，出现在浏览器标题栏。如favicon.png(支持多种格式)，一般存放到网站的根目录里面，通过link引入
# 宽度适配：宽度自适应
        # 百分比布局
        # Flex布局
# 等比适配：宽高等比缩放
        # rem相对单位：是相对于HTML根元素（<html>）的字体大小的单位(如根字体大小为16px，则1rem = 16px)
        # vw相对单位：是相对于视口宽度的百分比单位(1vw = 视口宽度的 1%)
        # vh相对单位：是相对于视口高度的百分比单位(1vh = 视口高度的 1%)
# 媒体查询：允许开发者根据设备的特性（如视口宽高、分辨率、方向等）应用不同的样式(如根字体大小，一般可以通过JS动态计算基准值)。
        # @media 关键词 媒体类型 and (媒体特性) {
        #         选择器 {
        #                 CSS属性
        #         }
        # }
        # 常用特性：
                # 宽度/高度：
                # width / height：视口宽高
                # min-width / max-width：视口最小/最大宽度（最常用）
                # min-height / max-height：视口最小/最大高度
                # 方向：
                # orientation: portrait（竖屏） / landscape（横屏）
                # 分辨率：
                # resolution：设备像素密度（如 min-resolution: 2dppx）
        # 引入外部CSS：
        # <link rel="stylesheet" media="(max-width: 768px)" href="mobile.css">

# Less：是一个动态样式表语言，属于CSS预处理器，它扩展了标准 CSS 语言，增加了变量、混合（mixins）、函数、嵌套规则、运算等强大功能，让编写 CSS 代码更加高效、灵活、可维护和结构化。
        # 运算：
                # 加减乘直接书写计算表达式
                # 除法需要添加 小括号 或 . ，以避免语法歧义
                # 如果表达式有多个单位，会以第一个单位为准
        # 嵌套：
                # 快速生成后代选择器
                # .父选择器 {
                #         // 父级样式
                #         .子选择器{
                #                 // 子级样式
                #         }
                # }
                # 父选择器引用符：& 符号代表当前选择器的父选择器引用
        # 变量：存储数据的容器
                # 定义变量：@变量名: 数据;
                # 使用变量：CSS属性: @变量名;
        # 导入：@import "文件路径";
        # 导出：用于指定Less编译后CSS文件的输出位置
                # 在less文件的第一行添加：// out: 存储url（如果最终为文件夹名称则后面添加/）
                # 禁止导出：在less文件第一行添加：// out: false
# object-fit属性：用于控制可替换元素（如 <img>、<video>、<object> 等）的内容如何适应其容器的尺寸。它解决了内容尺寸与容器尺寸不匹配时的显示问题，类似于 background-size 控制背景图片的行为。
        # fill(默认)：完全填充容器，不保证保持原有的比例，内容可能拉伸填充整个内容容器。
        # cover：原比例完全填充容器，可能裁剪
        # contain：原比例完整显示内容，可能留白

# transform变换：通过一系列函数操作元素的形状、位置和方向，不会脱离文档流(一般与transition过渡配合使用)。(x轴向右，y轴向下，z轴向用户)
# 2D变换(平面变换)，3D变换(空间变换)：位移、旋转、缩放、倾斜。
# 属性值：
# translate()位移：
        # transform: translateX(50px); /* 水平向右移动50px */
        # transform: translateY(-20%); /* 垂直向上移动移动自身高度的20%（百分比是相对于自身宽高，水平方向按宽计算，垂直方向按高计算） */
        # transform: translateZ(); /* 正值向“前”（用户方向），负值向“后”（屏幕里方向） */
        # transform: translate(30px, 60px); /* 同时设置 X/Y(可以只写一个值，表示沿x轴水平移动) */
        # transform: translate3d(10px, 20px, 30px); /* 3D 位移（必须有三个值，Z轴指向用户） */
# perspective透视属性：定义视点到 z=0 平面（屏幕平面）的距离即视距，用来创建透视效果，让元素有立体感(近大远小)。(设置在3D变换元素的直接父容器上)
        # 建议取值800px-1200px
        # 值越小：视点越近，透视效果越强烈（远处的物体看起来更小，近处的更大，深度感夸张）。想象用放大镜看物体。
        # 值越大：视点越远，透视效果越微弱（物体大小变化更平缓，深度感更自然）。想象看远处的风景。
# transform-style属性：定义元素的直接子元素是位于独立的 3D 空间中呈现还是压平到父元素的 2D 平面。
        # 属性值：
        # flat：子元素被压平到父元素的2D平面中。(仅保留 2D 视觉效果)
        # preserve-3d：子元素在独立的 3D 空间中渲染。(保留真实的 3D 变换效果（深度、透视、遮挡关系）)
        # 呈现立体图形步骤：
        # 1.父元素添加transform-style: preserve-3d;
        # 2.子级定位
        # 3.调整子级的位置(位移或旋转)

# rotate()旋转：
        # transform: rotate(45deg); /* 2D 旋转（顺时针45度，正数顺时针，负数逆时针） */
        # transform: rotate(-45deg); /* 2D 旋转（逆时针45度） */
        # transform: rotateX(30deg); /* 绕X轴旋转（3D） */
        # transform: rotateY(1.57rad); /* 绕Y轴旋转（弧度单位）（3D） */
        # transform: rotateZ(90deg); /* 绕Z轴（等同于2D旋转，rotate()） */
        # transform: rotate3d(1, 1, 0, 45deg); /* (x,y,z,角度) 自定义轴旋转 */
        # 左手法则：左手握住旋转轴，拇指指向正方向，其他四个手指弯曲方向为旋转正方向即顺时针方向。
# transform-origin变换原点属性(属性值为水平方向原点位置，垂直方向原点位置，可以是关键字，百分比，数字+单位，默认为元素中心点，如果只写一个关键字，另一个方向默认为居中center)：
        # transform-origin: top left; /* 左上角 */
        # transform-origin: 20px 50%; /* X:20px, Y:中心 */
        # transform-origin: 0 0 100px; /* 3D 基准点（Z轴） */
# 变换顺序会影响结果，因为位移会改变原点位置，旋转会改变坐标轴方向，缩放会改变单位长度(添加过渡可以造成同时进行的错觉)：
        # 先位移后旋转：元素移动到新位置后旋转transform: translate(600px) rotate(90deg)注意多重变换不能分开写必须按复合属性写法，否则会被覆盖(层叠性)
        # 先旋转后位移：元素改变方向后沿新方向移动
# scale()缩放：
        # transform: scale(1.5); /* 水平垂直方向等比例缩放1.5倍 */
        # transform: scaleX(0.8); /* 水平方向缩放倍数 */
        # transform: scaleY(-1.2); /* 垂直方向缩放1.2倍，并翻转 */
        # transform: scaleZ(1.2); /* 沿z轴方向缩放1.2倍 */
        # transform: scale(2, 0.5); /* 水平2倍，垂直0.5倍 */
        # transform: scale3d(1, 1, 1.5); /* 3D 缩放（Z轴效果需3D环境） */
# skew()倾斜：
        # transform: skewX(15deg); /* 水平方向倾斜 */
        # transform: skewY(-10deg); /* 垂直方向倾斜 */
        # transform: skew(20deg, 30deg); /* 同时设置 X/Y */

# 渐变：可以让你在两个或多个指定的颜色之间显示平稳的过渡，无需使用图像文件。
# 线性渐变：沿直线方向过渡颜色。
        # background-image: linear-gradient(渐变方向, 颜色1 终点位置, 颜色2 终点位置, ......)（渐变方向可选，可以是关键词（to + 方位名词），也可以是角度值（0deg（从下往上）），默认to bottom。终点位置可选，百分比，默认均匀分布，渐变会在相邻的终点位置之间平滑过渡。）
# 径向渐变：从中心点向外辐射的渐变。
        # background-image: radial-gradient(形状 半径 at 圆心位置, 颜色1 终点位置, 颜色2 终点位置, ......)（形状可选，默认为椭圆ellipse。半径可选，默认为容器宽高的一半，如果设置了正圆circle形状则半径为较短边的一半，指定单条半径一定为正圆，指定两条不同半径则可能为椭圆，如果指定了形状为正圆，那即使提供了两条半径，浏览器也会忽略第二条半径。圆心位置取值可以是像素单位数值、百分比、方位名词，有两个值类似background-position，但默认为center。终点位置可选，百分比，默认均匀分布，渐变会在相邻的终点位置之间平滑过渡。）

# 关键帧动画；允许开发者通过改变元素的CSS属性值创建动态效果。它主要通过关键帧（Keyframes） 和 动画属性（Animation Properties） 实现。
        # 定义动画(关键帧规则)：
        # 可以用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
        # @keyframes 动画名称 {
        # 0% { /* 起始状态样式（如果和原始样式一样可以省略） */ }
        # 50% { /* 中间状态样式 */ }
        # 100% { /* 结束状态样式（如果和原始样式一样可以省略） */ }
        # }
        # 使用动画(给需要动画效果的元素添加动画属性)：
        # 简写属性：
        # animation: 动画名称 持续时间 速度曲线 延迟时间 播放次数 播放方向 填充模式;（animation-name动画的名称和animation-duration动画的持续时间是必须属性，如果要使用多个动画则之间用逗号隔开）
        # animation-timing-function速度曲线：
                # 属性值：
                # ease (默认)：慢速开始，中间加速，慢速结束
                # linear：匀速运动
                # ease-in：慢速开始
                # ease-out：慢速结束
                # ease-in-out：慢速开始和结束
                # cubic-bezier(n,n,n,n)：自定义贝塞尔曲线
                # steps(n, start|end)：分步动画
        # animation-delay延迟时间：
                # 用于设置动画开始前的延迟时间
                # 默认值：0s（无延迟）
                # 负值：动画立即开始，但会跳过指定时间的动画
        # animation-iteration-count播放次数：
                # 默认值：1（播放一次）
                # <number>：具体次数（如 2, 3.5）
                # infinite：无限循环
        # animation-direction播放方向：
                # normal (默认)：正向播放
                # reverse：反向播放
                # alternate：奇数次正向，偶数次反向(交替)
                # alternate-reverse：奇数次反向，偶数次正向
        # animation-fill-mode填充模式：
                # 定义动画执行前后元素应用哪些样式
                # none (默认)：动画前后元素不应用任何样式，动画结束后元素恢复原始样式
                # forwards：动画结束后元素保留最后一帧样式
                # backwards：动画开始前应用第一帧样式（即使有延迟）
                # both：同时应用forwards和backwards规则
        # animation-play-state播放状态：
                # 用来控制动画播放状态，通常配合:hover使用
                # running (默认)：动画正在播放
                # paused：动画暂停
        # 走马灯无缝动画原理：复制开头图片到结尾位置，图片附加宽度=区域宽度，再无限循环，如果是逐帧动画则速度曲线使用step


